<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style>
        .main{
            position:relative;
        }
        .box{
            float:left;
            width:260px;
            padding:5px;
        }
        .pic{
            width:250px;
            overflow: hidden;
            height:auto;
        }
        .pic1{
            display: inline-block;
            width:250px;
            height:500px;
            background-color:hotpink;
        }
        .pic2{
            display: inline-block;
            width:250px;
            height:300px;
            background-color:cornflowerblue;
        }

    </style>
</head>
<body>
<div class="main">
   <div class="box">
       <div class="pic">
           <div class="pic1"></div>
       </div>
   </div>
    <div class="box">
        <div class="pic">
            <div class="pic2"></div>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <div class="pic1"></div>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <div class="pic1"></div>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <div class="pic2"></div>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <div class="pic2"></div>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <div class="pic1"></div>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <div class="pic2"></div>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <div class="pic1"></div>
        </div>
    </div>
</div>
<script>
    window.onload=function(){
        waterFlow();
    };
    function waterFlow() {
        //获取做外面的div
        var oMain = document.querySelector(".main");
        //获取所有的box
        var aBox = document.querySelectorAll(".box");
        //获取屏幕宽度为了算一行的个数
        var oClient = document.documentElement.clientWidth;
        //获取所有的标签
        var oMainAll = oMain.getElementsByTagName("*");
        //计算一行有多少个
        var num = Math.floor(oClient / oMainAll[0].offsetWidth);
        //设置父元素样式
        oMain.style.cssText = 'width:' + oMainAll[0].offsetWidth * num + 'px;margin:0 auto';
        getHeightOfCols(aBox,num);

    }
    function getHeightOfCols(aBox,num) {
        //创建数组，用来盛放每一行的高度
        var arr = [];
        var minHeight, minIndex;
        for (var i = 0; i < aBox.length; i++) {
            if (i < num) {
               arr[i] = aBox[i].offsetHeight;
            } else {
                //arr.sort(sortNumber);
                //minHeight = arr[0];
                minIndex = getMinIndex(arr, minHeight);
                aBox[i].style.position= 'absolute';
                aBox[i].style.top = arr[i] + 'px';
                aBox[i].style.left = aBox[i-num].offsetLeft +aBox[i-num].offsetWidth +'px';
                //console.log( aBox[i-3].style.top,aBox[i-3].style.left)
                //console.log( aBox[i].style.top,aBox[i].style.left)
                arr[minIndex] += aBox[i].offsetHeight;
            }

        }
    }
    function sortNumber(a,b)
    {
        return a - b
    }
    function getMinIndex(arr,minHeight) {
        for (var i in arr) {
            if (arr[i] === minHeight) {
                return i;
            }
        }
    }

</script>
</body>
</html>